<template>
    <div>
        <el-row>
            <el-col :span="8">
                <div class="confirmed">
                    <div class="title">现有确诊，无症状感染者</div>
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="confirmed" style="width: 100%;height:400px;"></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="cure">
                    <div class="title">国内治愈率</div>
                    
                </div>
            </el-col>
            <el-col :span="8">
                <div class="top">
                    <div class="title">现有确诊，无症状感染者</div>
                    
                </div>
            </el-col>
        </el-row>
        <div class="newAdd">444</div>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
    data() {
        return {
            params: {
                page: 1,
                pageSize: 15
            },
            confirm: [],
            addresses: [],
            id:0
        }
    },
    computed: {
        ...mapState("data",["dataList"])
    },
    destroyed() {
        clearInterval(this.id)
    },
    created() {
        this.id = setInterval(() => {
            this.findData()
        },5000)
        // this.findData()
    },
    // mounted() {
    //     setTimeout(() => {
    //         this.initConfirmed()
    //     },1000)
    // },
    methods: {
        ...mapActions("data",["pageQueryData"]),
        findData() {
            this.pageQueryData(this.params).then(res => {
                this.confirm = this.dataList.list.map(item => {
                    return item.confirmed
                })
                this.addresses = this.dataList.list.map(item => {
                    return item.province
                })
                this.initConfirmed()
            })
        },
        // 初始化图表
        initConfirmed() {
            // 销毁图表
            echarts.init(document.getElementById('confirmed')).dispose()
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('confirmed'));
            
            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.addresses,
                    axisLabel: {
						interval: 0,    //强制文字产生间隔
					    rotate: 45,     //文字逆时针旋转45°
						textStyle: {    //文字样式
                            color: "black",
                            fontSize: 12,
                            fontFamily: 'Microsoft YaHei'
                            }
					   }
 
                    // axisLabel: {
                    //     formatter(val) {
                    //         return val.split("").join("\n")
                    //     }
                    // }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '现有确诊',
                        type: 'line',
                        smooth: true,
                        stack: '总量',
                        data: this.confirm
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }  
    },
}
</script>
<style scoped>

    .title {
        text-align: center;
    }
</style>